<template>
  <view class="time-slot-page">
    <!-- 标题可根据需求自定义，比如显示场地信息 -->
    <view class="page-title">选择时间段</view>
    <!-- 时间段列表 -->
    <view class="time-slot-list">
      <view 
        v-for="(slot, index) in timeSlots" 
        :key="index" 
        class="time-slot-item" 
        @click="handleSlotClick(slot)"
      >
        {{ slot }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 生成 9:00 - 22:00 每个整点时间段，格式如 "9:00-10:00"
      timeSlots: []
    };
  },
  created() {
    this.initTimeSlots();
  },
  methods: {
    initTimeSlots() {
      for (let hour = 9; hour < 22; hour++) {
        const start = `${hour}:00`;
        const end = `${hour + 1}:00`;
        this.timeSlots.push(`${start}-${end}`);
      }
    },
    handleSlotClick(slot) {
      // 这里编写跳转付款页面逻辑，比如 uni.navigateTo（uni-app）或 this.$router.push（Vue Router）
      uni.showToast({
        title: `选择了${slot}，前往付款`,
        icon: 'none'
      });
      // 示例跳转，实际替换为付款页面路径，如：
      // uni.navigateTo({ url: `/pages/payment/payment?slot=${slot}` });
    }
  }
};
</script>

<style scoped>
.time-slot-page {
  padding: 15px;
  background-color: #f9f9f9;
}
.page-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}
.time-slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.time-slot-item {
  width: calc(50% - 5px); /* 一排两个，减去间距 */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
}
.time-slot-item:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
</style>